<template>
<div style="background:white;height:100%">
    <v-container style="margin-top:30%">
        <v-layout  row wrap text-xs-center justify-center align-center>
            <v-flex xs12 text-xs-center><h1 style="color:#4caf50;margin-bottom:30px">COMMUNITY</h1></v-flex>
            <v-flex xs10 text-xs-center justify-center align-center>
                <v-text-field clearable placeholder="用户名" v-model="username"></v-text-field>
            </v-flex>
            <v-flex xs10 text-xs-center>
                <v-text-field placeholder="密码" :rules="[pwRules.passwordMatch]"
                :append-icon="showPW?'visibility':'visibility_off'" 
                @click:append="showPW=!showPW"
                :type="showPW?'text':'password'" v-model="password"></v-text-field>
            </v-flex>
            <v-flex xs10 style="margin-top:15px">
                <v-btn style="width:100%;margin:0" color="primary" @click="login">登陆</v-btn>
            </v-flex>
            <v-flex xs10 style="margin-top:10px">
                <v-layout>
                    <v-flex>
                        <span style="float:left;color:#4caf50" @click="$router.push('register')">注册</span>
                    </v-flex>
                    <v-flex>
                        <span style="float:right;line-height:26px;color:#4caf50">忘记密码</span>
                    </v-flex>
                </v-layout>
            </v-flex>
        </v-layout>
    </v-container>
</div>
</template>

<script>
export default {
    data(){
        return {
            pwRules:{
                counter:value=>value.length>=8||'密码至少为8位',
                passwordMatch:value=>{
                    const pattern=/^([0-9]*[a-zA-Z]*)+$/
                    return pattern.test(value)||'密码必须为数字或字母'
                }
            },
            showPW:false,
            username:'',
            password:'',
        }
    },
    methods:{
        login(){
            // this.getPK()
            if(this.username==''||this.password==''){
                alert('用户名和密码不能为空')
                return
            }
            var formData=new FormData()
            formData.append('username',this.username)

            var jse=new JSEncrypt()
            jse.setPublicKey(this.getPK())
            var encrypted=jse.encrypt(this.password)
            formData.append('password',encrypted)

            this.$axios.post(this.SERVER+'/users/login',formData).then({
                function(response){
                    var accessToken=response['Access-Token']
                    var refreshToken=response['Refresh-Token']
                    localStorage.setItem('Access-Token',accessToken)
                    localStorage.setItem('Refresh-Token',refreshToken)
                    this.$router.push('home')
                }
            }).catch({
                function(response){
                    console.log(response)
                }
            })
        },
        getPK(){
            console.log('hhhhhhhhhhhhhhhhhhhhhhhhhhhhh')
            // this.$axios({
            //     method:'get',
            //     url:this.SERVER+'/users/toLogin',
            //     dataType:'jsonp',
            //     crossDomain:true,
            // }).then({
            //     function(response){
            //         console.log('hhhhhhhhhhhhh')
            //         console.log(response)
            //         // return response['data']
            //     }
            // }).catch({
            //     function(response) {
            //         console.log(response)
            //     }
            // })
            this.$axios.get(this.SERVER+'/users/toLogin').then(res => {
                console.log(res['data']['data'])
                return res['data']['data']
            },res => {
                console.info('调用失败');
            });
        }
    },
    mounted(){
        // this.getPK
    }
}
</script>

